<template>
  <div class="investment-analysis">
    <div class="analysis-header">
      <h2>投资组合分析</h2>
      <div class="header-actions">
        <button class="primary-btn">新增投资</button>
        <button class="secondary-btn">导出报告</button>
      </div>
    </div>

    <div class="performance-chart">
      <h3>收益率走势</h3>
      <v-chart class="chart" :option="performanceChart" />
    </div>

    <div class="investment-table">
      <div class="table-header">
        <h3>投资项目列表</h3>
        <div class="filters">
          <select>
            <option>全部类型</option>
            <option>股票型</option>
            <option>债券型</option>
            <option>混合型</option>
          </select>
          <select>
            <option>全部风险</option>
            <option>高风险</option>
            <option>中风险</option>
            <option>低风险</option>
          </select>
        </div>
      </div>

      <table>
        <thead>
          <tr>
            <th>项目名称</th>
            <th>类型</th>
            <th>风险等级</th>
            <th>收益率</th>
            <th>投资金额</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in investmentList" :key="item.name">
            <td>{{ item.name }}</td>
            <td>{{ item.type }}</td>
            <td>
              <span :class="['risk-tag', 
                item.risk === '高' ? 'high' : 
                item.risk === '中' ? 'medium' : 'low']">
                {{ item.risk }}
              </span>
            </td>
            <td :class="parseFloat(item.return_rate) >= 0 ? 'profit' : 'loss'">
              {{ item.return_rate }}
            </td>
            <td>¥{{ item.amount }}</td>
            <td>
              <span :class="['status-tag', 
                item.status === '盈利' ? 'profit' : 'loss']">
                {{ item.status }}
              </span>
            </td>
            <td>
              <button class="action-btn">详情</button>
              <button class="action-btn">编辑</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart, LineChart } from 'echarts/charts';
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import VChart from 'vue-echarts';

use([
  CanvasRenderer,
  BarChart,
  LineChart,
  GridComponent,
  TooltipComponent,
  LegendComponent
]);

const performanceChart = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['收益率', '基准']
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value}%'
    }
  },
  series: [
    {
      name: '收益率',
      type: 'line',
      data: [12, 15, 13, 16, 18, 20]
    },
    {
      name: '基准',
      type: 'line',
      data: [10, 12, 11, 13, 15, 16]
    }
  ]
};

const investmentList = ref([
  {
    name: '科技创新基金',
    type: '股票型',
    risk: '高',
    return_rate: '15.8%',
    amount: '500,000',
    status: '盈利'
  },
  {
    name: '稳健债券基金',
    type: '债券型',
    risk: '低',
    return_rate: '5.2%',
    amount: '300,000',
    status: '盈利'
  },
  {
    name: '新能源主题',
    type: '混合型',
    risk: '中',
    return_rate: '-2.5%',
    amount: '200,000',
    status: '亏损'
  }
]);
</script>

<style scoped>
.investment-analysis {
  width: 100%;
  min-width: 1200px;
}

.analysis-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 0 20px;
}

.header-actions button {
  margin-left: 10px;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.primary-btn {
  background: #1890ff;
  color: white;
  border: none;
}

.secondary-btn {
  background: white;
  border: 1px solid #1890ff;
  color: #1890ff;
}

.performance-chart {
  background: white;
  padding: 30px;
  border-radius: 10px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.chart {
  height: 450px;
  width: 100%;
}

.investment-table {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.filters {
  display: flex;
  gap: 20px;
}

.filters select {
  min-width: 150px;
  padding: 8px 15px;
  border-radius: 5px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.risk-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.risk-tag.high {
  background: #fff1f0;
  color: #f5222d;
}

.risk-tag.medium {
  background: #fff7e6;
  color: #fa8c16;
}

.risk-tag.low {
  background: #f6ffed;
  color: #52c41a;
}

.profit {
  color: #52c41a;
}

.loss {
  color: #f5222d;
}

.status-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-tag.profit {
  background: #f6ffed;
  color: #52c41a;
}

.status-tag.loss {
  background: #fff1f0;
  color: #f5222d;
}

.action-btn {
  margin: 0 5px;
  padding: 4px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

.action-btn:hover {
  color: #1890ff;
  border-color: #1890ff;
}
</style> 